<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="商品名称:" >
          <el-input clearable v-model="searchForm.prodName" placeholder="请输入" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="demomId:" >
          <el-input clearable v-model="searchForm.demomId" placeholder="请输入" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="铸币类别名称:" >
          <el-input clearable v-model="searchForm.denomName" placeholder="请输入" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="tokenId:" >
          <el-input  clearable v-model="searchForm.tokenId" placeholder="请输入" size="mini"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" icon="el-icon-search" @click="searchChange(true)">查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="clearSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table :data="dataList" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
      <el-table-column prop="prodName" label="商品名称" min-width="100" align="center"/>
      <el-table-column prop="denomeId" label="denomId" min-width="100" align="center"/>
      <el-table-column prop="denomName" label="铸币类别名称" min-width="100" align="center"/>
      <el-table-column prop="tokenId" label="tokenId" min-width="100" align="center" />
      <el-table-column prop="times" label="划转次数" align="center" />
      <el-table-column prop="" label="操作" width="160" fixed ="right">
        <template scope="scope">
          <el-button size="mini" type="primary" @click="collectDetail(scope.row.tokenId)">明细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page.currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      :total="page.total"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <!-- 详情列表弹窗-->
    <collect-detail v-if="collectDetailVisible"
                           ref="collectDetail"
                           @refreshDataList="refreshChange">
    </collect-detail>
  </div>
</template>

<script>
import CollectDetail from '@/views/modules/upchain/transferRecord/collect-detail.vue'
export default {
  data () {
    return {
      dataListLoading: false,
      collectDetailVisible: false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条,
      },
      searchForm: {
        prodName: '',
        demomId: '',
        denomName: '',
        tokenId: ''
      },
      dataList: []
    }
  },
  components: {
    CollectDetail
  },
  mounted () {
    this.getDataList()
  },
  methods: {
    getDataList (page, newData = false) {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl(`/admin/transferRecord/collectPage`),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign({
            current: page == null ? this.page.currentPage : page.currentPage,
            size: page == null ? this.page.pageSize : page.pageSize
          },
            this.searchForm
          )
        )
      }).then(({ data }) => {
        this.dataList = data.records
        this.page.total = data.total
        this.dataListLoading = false
      })
    },
    searchChange (newData = false) {
      this.page.currentPage = 1
      this.getDataList(this.page, newData)
    },
    clearSearch () {
      this.searchForm.prodName = ''
      this.searchForm.demomId = ''
      this.searchForm.denomName = ''
      this.searchForm.tokenId = ''
      this.page.currentPage = 1
      this.getDataList(this.page, true) // 重置表单加载初始数据
    },
    // 分页按钮
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getDataList(this.page)
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getDataList(this.page)
    },
    // 明细列表
    collectDetail (tokenId) {
      this.collectDetailVisible = true
      this.$nextTick(() => {
        this.$refs.collectDetail.init(tokenId)
      })
    },
    // 刷新回调用
    refreshChange () {
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100px;
  }
}
</style>
